<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Search, Plus, UserFilled, ArrowRight, ArrowDown, CirclePlus } from '@element-plus/icons-vue'
import eleCollapse from '@/components/ele-collapse/index.vue'

const lllll = ref()
const input = ref()
const imglist = ref([
    { url: '../../../src/assets/images/1.png' },
    { url: '../../../src/assets/images/2.png' },
    { url: '../../../src/assets/images/3.png' }
])

function PlusClick() {
    console.log('PlusClick');

}

const NewFriendList = ref([
    { url: '../../../src/assets/images/3.png', label: '王五', subabel: '简简单单：？？？', status: '1', time: '2024/10/10', isqun: false, },
])
const qunlist = ref([

    {
        url: '../../../src/assets/images/3.png', label: '济南Android开车群', subabel: '简简单单：？？？', time: '2024/10/10', isqun: true,
        qunList: [{ url: '../../../src/assets/images/1.png', label: '简简单单', subabel: 'becbb75cccce342b9a31b2cd70', time: '2024/10/10', isqun: false },
        { url: '../../../src/assets/images/2.png', label: '徐骚航-全世界最丑最骚最骚的', subabel: '[视频号]青空律师事务所法官咨询', time: '2024/10/10', isqun: false },
        { url: '../../../src/assets/images/3.png', label: '济南Android开车群', subabel: '简简单单：？？？', time: '2024/10/10', isqun: true, qunList: [] }]
    }
])

const contactlist = ref([
    { url: '../../../src/assets/images/1.png', label: '简简单单', subabel: 'becbb75cccce342b9a31b2cd70', time: '2024/10/10', isqun: false },
    { url: '../../../src/assets/images/2.png', label: '徐骚航-全世界最丑最骚最骚的', subabel: '[视频号]青空律师事务所法官咨询', time: '2024/10/10', isqun: false },
    { url: '../../../src/assets/images/3.png', label: '李思源', subabel: '简简单单：？？？', time: '2024/10/10', isqun: false, },
    { url: '../../../src/assets/images/3.png', label: '张三', subabel: '简简单单：？？？', time: '2024/10/10', isqun: false, },
    { url: '../../../src/assets/images/3.png', label: '李四', subabel: '简简单单：？？？', time: '2024/10/10', isqun: false, },
    { url: '../../../src/assets/images/3.png', label: '王五', subabel: '简简单单：？？？', time: '2024/10/10', isqun: false, },
])

const QYLXRlist = ref([
    { url: '../../../src/assets/images/qy.png', label: '北京小米', subabel: '简简单单：？？？', time: '2024/10/10', isqun: false, },
])
const GZhlist = ref([
    { url: '../../../src/assets/images/gzh.png', label: '奥克斯空调', subabel: '简简单单：？？？', time: '2024/10/10', isqun: false, },
])

// function itemClick(val: any) {
//     console.log(val);

//     // if (val == '') {

//     // }
// }
const isNewFriend = ref(false)
const isQun = ref(false)
const isGZh = ref(false)
const isQYLXR = ref(false)
const isContact = ref(true)






const isNewFriendFn = (val: boolean) => {
    isNewFriend.value = val
}
const isQunFn = (val: boolean) => {
    isQun.value = val
}
const isGZhFn = (val: boolean) => {
    isGZh.value = val
}
const isQYLXRFn = (val: boolean) => {
    isQYLXR.value = val
}

const isContactFn = (val: boolean) => {
    isContact.value = val
}
const  meunArrIndex = ref(-1)
const  meunArr = [
{icon:'icon-fangkuai',lable:'全部收藏'},
{icon:'icon-shizhong',lable:'最近使用'},
{icon:'icon-tupian_o',lable:'图片与视频'},
{icon:'icon-wenjian',lable:'文件'},
{icon:'icon-bijibendefuben',lable:'笔记'},
{icon:'icon-xiaoxi2',lable:'聊天记录'},
{icon:'icon-lianjie',lable:'链接'},
{icon:'icon-biaoqian_o',lable:'标签'}
]
const liClick = (val: boolean) => {
    isNewFriend.value = val
}

</script>

<template>
    <div class="lay dreg">
        <div class="lay_left">
            <div class="seachBox">
                <el-input v-model="input" style="width: 85%;background-color: #eaeaea;color: #eee;" size="small"
                    placeholder="搜索" input-style="" :prefix-icon="Search" />
                <el-icon :size="20" title="发起群聊" style="background-color: #eaeaea;border-radius: 2px;padding: 2px;"
                    @click="PlusClick">
                    <Plus />
                </el-icon>
            </div>

            <div class="sliderBox">
                <div style="padding: 10px;">
                    <div style="text-align: center;">
                        <el-button style="width: 100%;height: 42px;color: #000;font-weight: 800;" color="#ffffff" :icon="CirclePlus">新建笔记</el-button>
                    </div>
                    <div style="color: #000;margin-top: 10px;">
                        <template v-for="(i,k) in meunArr">
                            <span style="height: 40px;line-height: 40px; display: flex;align-items: center;font-size: 14px;" :style="{backgroundColor: meunArrIndex == k ? '#ddd':''} " @click="meunArrIndex = k,lllll =i.lable" >
                                <span style=""><span class="icon iconfont  center_foot_icon_item" :class="i.icon"></span> {{ i.lable }}</span>
                            </span>
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <div class="lay_center">
            <span style="color: #000;"> {{lllll}}</span>
        </div>
    </div>
</template>
<style src="./index.scss" scoped></style>
<style scoped></style>